<template>
	<div class="posters">
		<div class="bg-[#fff] text-center text-[#e05749] h-[190px]" :key="index" v-for="(item, index) in list"
			@click="lookVideo(index)">
			<img class="w-[100%] h-[100%] object-cover block" :src="item.coverUrl" />
			<div v-if="item.type == 1" class="relative">
				<div class="absolute text-[#fff]  bottom-[2px] left-[5px] flex items-center text-[14px] gap-[3px]">
					<Icon icon="icon-park-outline:like" />
					<span>21.3万</span>
				</div>
				<div v-if="item.isTop == 1"
					class="absolute text-[12px] bg-[#ffd700] text-[#000000] px-[3px] py-[2px] rounded-[2px]  left-[8px] top-[-185px]">
					置顶
				</div>
			</div>
			<div v-if="item.type == 2"
				class="absolute top-[5px] left-[5px] flex items-center flex-col text-[14px] text-[#000000] bg-[#fff] p-[6px] rounded-[6px]">
				<div class="font-bold">19</div>
				<div class="text-[10px]">七月</div>
			</div>
			<div v-if="mode === 'music'">
				<div
					class="absolute text-[12px] bg-[#ffd700] text-[#000000] px-[3px] py-[2px] rounded-[2px] top-[7px] left-[7px]"
					v-if="index === 0">首发</div>
			</div>
		</div>
	</div>
</template>

<script setup>
// import { _checkImgUrl, _formatNumber } from '@/utils'
import { Icon } from '@iconify/vue';
import { useRouter } from 'vue-router'
const props = defineProps({
	list: {
		type: Array,
		default: () => []
	},
	mode: {
		type: String,
		default: 'normal'
	}
})
const router = useRouter()

function getDay (time) {
	let date = new Date(time * 1000)
	return date.getDate()
}

function getMonth (time) {
	let date = new Date(time * 1000)
	let month = date.getMonth() + 1
	switch (month) {
		case 1:
			return '一月'
		case 2:
			return '二月'
		case 3:
			return '三月'
		case 4:
			return '四月'
		case 5:
			return '五月'
		case 6:
			return '六月'
		case 7:
			return '七月'
		case 8:
			return '八月'
		case 9:
			return '九月'
		case 10:
			return '十月'
		case 11:
			return '十一月'
		case 12:
			return '十二月'
	}
}
const lookVideo = (index) => {
	router.push(`/play?index=${index}`)
}
</script>

<style scoped lang="less">
.posters {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
	grid-gap: 1px;
	position: relative;
}
</style>
